<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <h2>总价格:{{totalPrice}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const vm=new Vue({
    el:'#app',
    data:{
      message:'',
      books:[
        {id:100,name:'Java程序设计',price:50},
        {id:101,name:'Linux基础命令',price:65},
        {id:102,name:'深入理解计算机原理',price:99},
        {id:103,name:'现代操作系统',price:89}
      ]
    },
    computed:{
      totalPrice:function () {
        let sum=0;
        // for (let i = 0; i < this.books.length; i++) {
        //   sum+=this.books[i].price
        // }
        for (let i in this.books ){
          sum+=this.books[i].price
        }
        return sum
      }
    }
  })
</script>

</body>
</html>